<%@ page contentType="text/html;charset=UTF-8" %>
<%@ include file="/WEB-INF/views/include/taglib.jsp"%>
<html>
<head>
	<title>员工结算单管理</title>
	<meta name="decorator" content="default"/>
	 <style type="text/css">
		.opreation{
			display:none;
		}
		 form textarea.ui-input-text{height:50px;}
		 .ui-table-reflow td, .ui-table-reflow th{
			text-align: center;
		 }
		 #firstStep{
		 	width:400px;height:260px;margin:auto;border:1px solid #cccccc;padding:40px;margin-top:100px;
		 }
		 #secondStep, #contentTable{
		 	display:none;
		 }
		 .form-input{
		 	width:90%;
			margin:auto;
		 }
	</style>
	<script type="text/javascript">
		var jsonData = [];
		var employeeList = "";
		$(document).ready(function() {
			$("#contentTable tbody tr.select").click(function(){
				var item = $("#opreation-"+ this.id);
				var old = item.css('display');
				$(".opreation").css('display','none');
				if(old == "none") {
					item.css('display','table-row');
				}
			});
			$("#firstStepForm").validate({
			 	rules:{
	                "endDate": {
	                	ifLargeDate: "#startDate"
	                }
	            },
				submitHandler: function(form){
					firstStep();
				},
				errorContainer: "#messageBox",
				errorPlacement: function(error, element) {
					$("#messageBox").text("输入有误，请先更正。");
					if (element.is(":checkbox")||element.is(":radio")){
						error.appendTo(element.parent().parent());
					} else {
						error.insertAfter(element);
					}
				}
			});
		});
		
		function updateFloatSalary(item){
			var current_index = item.attr("index");
			var oldMoney = Number(item.attr("oldValue"));
			var newMoney = Number(item.val());
			var total = Number($("#" + current_index + " .total").html());
			total = total + newMoney - oldMoney;
			item.attr("oldValue", item.val());
			$("#" + current_index + " .total").html(total);
			var allMoney = Number($("#allMoney").html());
			allMoney = allMoney + newMoney - oldMoney;
			$("#allMoney").html(allMoney);
			var node = getData(current_index);
			node.float_salary = Number(item.val());
			node.total = total;
		}
		
		function deleteItem(tr_id){
			var money = Number($("#" + tr_id +" .total").html());
			var allMoney = Number($("#allMoney").html());
			$("#" + tr_id).remove();
			var item = $("#opreation-"+ tr_id);
			item.remove();
			var remain = allMoney - money;
			$("#allMoney").html(remain);
			removeData(tr_id);
		} 
		
		function checkSubmit(){
			var dosumbit = function(){
				$("#jsonData").val(JSON.stringify(jsonData));
				$("#submitForm").submit();
			}
			global.confirm("是否确认此结算单?", dosumbit);
		}
		
		function firstStep(){
			$("#startDateLabel").html($("#startDate").val());
			$("#endDateLabel").html($("#endDate").val());
			$('#firstStep').css('display', 'none');
			$('#secondStep').css('display', 'block');
			addEmployee();
		}
		
		function removeData(employeeId){
			employeeList = employeeList.replace(employeeId+",", "");
			for(var i = 0, k = jsonData.length; i < k; i++) {
				var node = jsonData[i];
				if(node.employeeId == employeeId) {
					jsonData.splice(i, 1);
					return;
				}
			}
		}
		function getData(employeeId){
			for(var i = 0, k = jsonData.length; i < k; i++) {
				var node = jsonData[i];
				if(node.employeeId == employeeId) {
					return node;
				}
			}
		}
		function secondStep(employeeIds){
			if (employeeIds && employeeIds != '') {
				var data = {
					'employeeIds' : employeeIds,
					'startDate' : $("#startDate").val(),
					'endDate' : $("#endDate").val()
				};
				jQuery.ajax({  
			          type : 'POST',  
			          url : '${ctx}/employee/storeEmployeeAccounting/account',  
			          data :data,
			          success : function(data) {
			        	 var data = $.parseJSON(data); 
			        	 jsonData = jsonData.concat(data);
			        	 var html = "";
			        	 var allMoney = 0;
			        	 for(var i = 0, k = data.length; i < k; i++) {
			        		var node = data[i];
		    		    	 html += '<tr id="'+ node.employeeId +'" class="select">';
		    		    	 html += '<td>'+ node.employeeName +'</td>';
		    		    	 html += '<td>'+ node.title +'</td>';
		    		    	 if(!node.base_salary){
		    		    		 node.base_salary = 0;
		    		    	 }
		    		    	 html += '<td>'+ node.base_salary +'</td>';
		    		    	 if(!node.new_card_bonus){
		    		    		 node.new_card_bonus = 0;
		    		    	 }
		    		    	 html += '<td>'+ node.new_card_bonus +'</td>';
		    		    	 if(!node.product_sale_bonus){
		    		    		 node.product_sale_bonus = 0;
		    		    	 }
		    		    	 html += '<td>'+ node.product_sale_bonus +'</td>';
		    		    	 if(!node.do_care_bonus){
		    		    		 node.do_care_bonus = 0;
		    		    	 }
		    		    	 html += '<td>'+ node.do_care_bonus +'</td>';
		    		    	 if(!node.recharge_card_bonus){
		    		    		 node.recharge_card_bonus = 0;
		    		    	 }
		    		    	 html += '<td>'+ node.recharge_card_bonus +'</td>';
		    		    	 if(!node.float_salary){
		    		    		 node.float_salary = 0;
		    		    	 }
		    		    	 html += '<td><input type="number" style="width:3.5em;" index="'+ node.employeeId +'" id="float_salary-'+ node.employeeId +'" class="float_salary" oldValue="'+ node.float_salary +'" value="'+ node.float_salary +'"/>';
		    		    	 if(!node.total){
		    		    		 node.total = 0;
		    		    	 }
		    		    	 html += '</td><td class="total">'+ node.total +'</td></tr>';
		    		    	 html += '<tr id="opreation-'+ node.employeeId +'" class="opreation">';
		    		    	 html += '<td>备注</td>';
		    		    	 html += '<td colspan="5"><textarea index="'+ node.employeeId +'" class="remark" value="'+ node.remark +'">&nbsp;</textarea></td>';
		    		    	 html += '<td colspan="3">';
		    		    	 html += '<a data-role="button" data-inline="true" onclick="deleteItem('+ node.employeeId +')">删除</a>';
		    		    	 html += '</td></tr>';
		    		    	 allMoney += Number(node.total);
			        	 }
			        	 var oldAllMoney = Number($("#allMoney").html());
			        	 $('#allMoney').html(allMoney + oldAllMoney);
			        	 $('#contentTable tbody').prepend(html);
			        	 $('#contentTable').trigger("create"); 
			        	 $('#contentTable').css('display', 'table');
			        	 $("#contentTable").undelegate();
			        	 $("#contentTable").delegate(".float_salary", "change", function(){
			 				updateFloatSalary($(this));
			 		     }); 
			        	 $("#contentTable").delegate(".remark", "change", function(){
		        			 var current_index = $(this).attr("index");
		        			 var node = getData(current_index);
		        			 node.remark =$(this).val();
				 		 });
			        	 $("#contentTable tbody").delegate("tr.select", "click", function(){
			        		 var item = $("#opreation-"+ this.id);
				 				var old = item.css('display');
				 				$(".opreation").css('display','none');
				 				if(old == "none") {
				 					item.css('display','table-row');
				 				}
				 		 });
			          },  
			          error : function(data) {  
			        	  showTip("查询失败");
			          }  
			    }); 
			} else {
				showTip("员工不能为空！");
			}
		};
		
		function addEmployee() {
			var func = function(){
				var addIds = "";
				var items = $('#dialog-mult-select ul li input');
				for(var i=0; i<items.length; i++) {
					var item = $(items[i]);
					if(item.prop("checked") == true) {
						var id = item.attr("id");
						addIds += id + ",";
						employeeList += id + ",";
					}
				}
				secondStep(addIds);
			};
			var url = '${ctx}/employee/employee/employeeData'; 
			global.multSelectDialog(url, '添加员工', employeeList, func);
		};
	</script>
</head>
<body>
<div class="icon-buttons">
	<a data-role="button" data-inline="true" data-icon="back" data-iconpos="notext"  href="${ctx}/employee/storeEmployeeAccounting">返回</a>
	<input type="button" data-inline="true" onclick="checkSubmit()" data-icon="check" data-iconpos="notext" value="确认结算单"/>
</div>
<tags:message content="${message}"/>
<div id="firstStep">
    <h1>设置结算日期</h1>
    <form id="firstStepForm">
        <div data-role="fieldcontain">
       	 	<label for="startDate">开始日期：</label>
			<input type="date" id="startDate" data-inline="true" name="startDate" class="required"/>
		</div>
		<div data-role="fieldcontain">
			<label for="endDate">结束日期：</label>
			<input type="date" id="endDate" data-inline="true" name="endDate" class="required"/>
		</div>
		<br />
		<input type="submit" value="下一步"/>
    </form>
</div>
<div id="secondStep" class="form-input">
	<div>
		<font>开始日期：</font>
		<font id="startDateLabel"></font>
		<font>结束日期：</font>
		<font id="endDateLabel"></font>
	</div>
	<form id="submitForm" action="${ctx}/employee/storeEmployeeAccounting/save">
		<input type="hidden" name="jsonData" id="jsonData">
		<input type="button" onclick="addEmployee()" data-inline="true" value="添加员工">
	</form>
	<table id="contentTable" data-role="table" class="ui-responsive table-stroke">
		<thead><tr><th>员工名称</th><th>职务</th><th>基本工资</th><th>新开卡提成</th><th>产品销售提成</th><th>手工护理提成</th><th>卡充值提成</th><th>浮动工资</th><th>合计</th></tr></thead>
		<tbody>
			<tr id="-1"><th colspan="8">合计</th><th colspan="2"><font id="allMoney"></font></th></tr>
		</tbody>
	</table>
</div>
</body>
</html>
